import React from "react";
import {Form, Input, Button, message} from "antd";
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import './index.css'
import ReactCanvasNest from 'react-canvas-nest'
import axios from "axios";
import {useNavigate} from "react-router-dom";

export default function Login() {
    const navigate = useNavigate()
    const onFinish = (values) =>{
        console.log(values)
        axios.get("/users?username=" + values.username + "&password="
         + values.password + "&roleState=true&_expand=role").then(res=>{
             if (res.data.length===0){
                 message.error("用户名或密码不匹配！")
             }else {
                 localStorage.setItem("token",JSON.stringify(res.data[0]))
                 navigate("/")
             }
        })
    }
    return (
        <div style={{background:'rgb(35,39,65)',height:"100%"}}>
            <ReactCanvasNest
                className='canvasNest'
                config={{
                    pointColor: '255,255,255',
                    lineColor: '255,255,255',
                    pointOpacity: 0.5,
                    pointR: 2,
                    count: 100
                }}
                style={{zIndex: 1}}
            />
            <div className="formContainer">
                <div className="loginTitle">全球新闻发布管理系统</div>
                <Form
                    name="normal_login"
                    className="login-form"
                    onFinish={onFinish}
                >
                    <Form.Item
                        name="username"
                        rules={[{ required: true, message: 'Please input your Username!' }]}
                    >
                        <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="Username" />
                    </Form.Item>
                    <Form.Item
                        name="password"
                        rules={[{ required: true, message: 'Please input your Password!' }]}
                    >
                        <Input
                            prefix={<LockOutlined className="site-form-item-icon" />}
                            type="password"
                            placeholder="Password"
                        />
                    </Form.Item>
                    <Form.Item>
                        <Button type="primary" htmlType="submit" className="login-form-button">
                            登录
                        </Button>
                        Or <a href="">register now!</a>
                    </Form.Item>
                </Form>
            </div>
        </div>
    )
}